<script setup>
import {onMounted, reactive} from "vue";
import axios from "@/util/axios.js";
import {ElMessage} from "element-plus";

const data = reactive({
  tableData: [],
  total: 0,
  queryParam: {
    page: 1,
    size: 10
  },
  dialogVisible: false,
  dialogTitle: '添加登录用户',
  formData: {
    id: undefined,
    loginName: '',
    showName: "",
    loginPassword: '',
    status: 1,
  },
  formRules: {
    loginName: [
      {required: true, message: '请输入登录名', trigger: 'blur'},
    ],
    showName: [
      {required: true, message: '请输入显示名称', trigger: 'blur'},
    ],
    loginPassword: [
      {required: true, message: '请输入登录密码', trigger: 'blur'},
    ],
    status: [
      {required: true, message: '请选择状态', trigger: 'blur'},
    ]
  },
  fpDialogVisible: false,
  fpPostData: {
    userId: undefined,
    roleIdList: []
  },
  roleList: [],
  hasRoleIdList:[],
})
const loadData = () => {
  axios.get('/acluser/list', {
    params: data.queryParam
  }).then(res => {
    data.tableData = res.data.info.items
    data.total = res.data.info.total
  })
}

onMounted(() => {
  loadData()
})

const restForData = () => {
  data.formData = {
    id: undefined,
    loginName: '',
    showName: "",
    loginPassword: '',
    status: 1,
  }
}

// 处理添加按钮的点击事件
const handlerAddBtn = () => {
  data.dialogTitle = "添加登录用户";
  data.dialogVisible = true
  restForData();
}

const confirmAdd = () => {
  console.log(data.formData)
  axios.post('/acluser/add', data.formData).then(res => {
    ElMessage.success("添加成功")
    data.dialogVisible = false
    loadData()
  }).catch(err => {

  })
}
// 处理分配角色按钮点击事件
const handlerFpBtn = async  (row)=>{
  data.fpPostData.userId = row.id
  // 查询所有的角色
  const response = await axios.get('/aclrole/list',{
    params: {
      page:1,
      size:200
    }
  });
  data.roleList = response.data.info.items
  // 查询已经有的角色
  const hasRoleIdList = await  axios.get('/acluser/hasRole',{
    params:{
      userId: data.fpPostData.userId
    }
  })
  data.fpPostData.roleIdList = hasRoleIdList.data.info



  data.fpDialogVisible = true
}

const confirmFp = ()=> {
  if (!data.fpPostData.userId) {
    ElMessage.error("参数错误")
    return
  }
  axios.post('/acluser/setRole',data.fpPostData).then(res => {
    data.fpDialogVisible = false
    data.fpPostData.userId = undefined
    data.fpPostData.roleIdList = []
    loadData()
    ElMessage.success("操作成功")
  })
}


</script>

<template>
  <div class="searchDiv">
    <el-form :inline="true" :model="data.queryParam">
      <el-form-item>
        <el-input type="text" v-model="data.queryParam.loginName" placeholder="登录名" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div style="margin-bottom: 10px;">
    <el-button type="primary" @click="handlerAddBtn" v-permission="'acluser:add'">添加</el-button>
  </div>
  <div>
    <el-table :data="data.tableData" stripe>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="登录名" prop="loginName"></el-table-column>
      <el-table-column label="显示名" prop="showName"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handlerAddBtn" v-permission="'acluser:edit'">编辑</el-button>
          <el-button size="small" type="success" @click="handlerFpBtn(scope.row)" v-permission="'acluser:role'">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="data.queryParam.page"
        v-model:page-size="data.queryParam.size"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="loadData"
        @current-change="loadData"
        style="margin-top: 20px;"
    />
    <el-dialog v-model="data.dialogVisible" :title="data.dialogTitle" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="data.formData" label-width="100px" :rules="data.formRules">
        <el-form-item label="登录名" prop="loginName">
          <el-input v-model="data.formData.loginName"></el-input>
        </el-form-item>
        <el-form-item label="显示名" prop="showName">
          <el-input v-model="data.formData.showName"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="loginPassword">
          <el-input type="password" v-model="data.formData.loginPassword"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="data.formData.status">
            <el-radio :value="1">正常</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>

        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="data.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="data.fpDialogVisible" title="分配角色" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-card>
        <el-checkbox-group v-model="data.fpPostData.roleIdList">
          <el-checkbox v-for="item in data.roleList" :label="item.role" :value="item.id" :key="item.id"/>
        </el-checkbox-group>
      </el-card>
      <template #footer>
        <el-button @click="data.fpDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmFp">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>